<template>
  <div class="container">
    <div class="loginBox">
      <div class="title">注册</div>
      <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
        <el-form-item :label="'学号'">
          <el-input v-model="formLabelAlign.stuNo" :disabled="disabled" placeholder="教师默认000000"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="formLabelAlign.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="formLabelAlign.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input type="password" v-model="formLabelAlign.repassword"></el-input>
        </el-form-item>
        <el-form-item label="学校">
          <el-select v-model="formLabelAlign.schoolId" placeholder="请选择">
            <el-option v-for="item in options" :key="item.schoolId" :label="item.schoolName" :value="item.schoolId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formLabelAlign.phone"></el-input>
        </el-form-item>
      </el-form>
      <el-radio-group @input="change" v-model="radio">
        <el-radio :label="0">学生注册</el-radio>
        <el-radio :label="1">教师注册</el-radio>
      </el-radio-group>
      <div class="buttom">
        <el-button type="primary" @click="register" round>注册</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { register } from '@/api/user'
import { getShools } from '@/api/School'
export default {
  data() {
    return {
      options: [],
      radio: 0,
      disabled: false,
      labelPosition: 'right',
      formLabelAlign: {
        schoolId: '',
        stuNo: '',
        username: '',
        password: '',
        repassword: '',
        phone: '',
        userType: 0
      }
    }
  },
  mounted() {
    getShools().then(res => {
      this.options = res.data
    })
  },
  methods: {
    change(e) {
      if (e === 1) {
        this.formLabelAlign.userType = e
        this.disabled = true
        this.formLabelAlign.stuNo = '000000'
        return
      }
      this.disabled = false
      this.formLabelAlign.stuNo = ''
    },
    register() {
      register(this.formLabelAlign).then(res => {
        if (res.data) {
          this.$message({
            message: res.msg,
            type: 'success'
          })

          this.$router.push('/login')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/images/bg.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: black;
  .loginBox {
    width: 400px;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 10px;
    .el-form-item__label {
      color: black !important;
    }
    .title {
      width: 100%;
      text-align: center;
      padding-bottom: 20px;
    }
    .buttom {
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
}
</style>